<template>
	<el-form  class="login-container" label-position="left" label-width="0px" >
		<h3 class="login_title">系统登录</h3>
		<el-form-item prop="account">
			<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
		</el-form-item>
		<el-form-item prop="checkPass">
			<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码" @keyup.enter.native="submitClick"></el-input>
		</el-form-item>
		<el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>
		<el-form-item style="width: 100%">
			<el-button type="primary" @click.native.prevent="login" style="width: 100%">登录</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	
	import { mapMutations } from 'vuex'
	export default {
		name: 'Login',
		components: {

		},
		data() {
			return {
				loginForm:{
					username: '',
					password: ''
				},
				checked:false
			}
		},
		methods: {
			//将logonuser方法展开
			...mapMutations(['logonUser']),
		
			login() {
				let url = '/login?type=login'
				this.axios.get(url ,user=>{
					if(user){
						
						// console.log("this.$store");
						// console.log(this.$store);
						this.logonUser(user);
						// console.log("this.$store");
						
						this.$router.push({path:'/'})
					}else{
						this.$message.error("登录失败")
					}
				},this.loginForm)

			}

		},
		created() {}
	}
</script>

<style scoped>
	.login-container {
	    border-radius: 15px;
	    background-clip: padding-box;
	    margin: 180px auto;
	    width: 350px;
	    padding: 35px 35px 15px 35px;
	    background: #fff;
	    border: 1px solid #eaeaea;
	    box-shadow: 0 0 25px #cac6c6;
	  }
	
	  .login_title {
	    margin: 0px auto 40px auto;
	    text-align: center;
	    color: #505458;
	  }
	
	  .login_remember {
	    margin: 0px 0px 35px 0px;
	    text-align: left;
	  }
</style>
